<template>
    <div>
        <el-container>
            <el-aside :width="isCollapse ? '64px':'200px'">
                <div class="Stafftitle" v-if="!isCollapse">
                    员工管理系统
                </div>
                <el-menu
                        @select="handleSelect"
                        background-color="#333744"
                        text-color="#fff"
                        style="margin-bottom: 210%"
                        active-text-color="#ffd04b" :collapse="isCollapse" :collapse-transition="false" :unique-opened="true" router :default-active="luyou">
                    <el-menu-item index="/StaffHello">
                        <template slot="title">
                            <i class="el-icon-location"></i>
                            <span>首页</span>
                        </template>
                    </el-menu-item>

                    <el-submenu index="2">
                        <template slot="title">
                            <i class="el-icon-location"></i>
                            <span>薪资管理</span>
                        </template>

                        <el-menu-item index="/driverPrint">
                            <template slot="title">
                                <i class="el-icon-location"></i>
                                <span>查看薪资</span>
                            </template>
                        </el-menu-item>

                        <el-menu-item index="2-3">
                            <template slot="title">
                                <i class="el-icon-location"></i>
                                <span>薪资通告</span>
                            </template>
                        </el-menu-item>

                    </el-submenu>


                    <el-submenu index="3">
                        <template slot="title">
                            <i class="el-icon-location"></i>
                            <span>车辆管理</span>
                        </template>

                        <el-menu-item index="/StaffSec">
                            <template slot="title">
                                <i class="el-icon-location"></i>
                                <span>现状上传</span>
                            </template>
                        </el-menu-item>

                        <el-menu-item index="3-3">
                            <template slot="title">
                                <i class="el-icon-location"></i>
                                <span>评论回复</span>
                            </template>
                        </el-menu-item>

                    </el-submenu>

                </el-menu>
            </el-aside>
            <el-container>
                <el-header>

                    <i class="el-icon-s-fold" @click="isCollapseTest" style="font-size: 27px;cursor: pointer"></i>
<!--                    <el-radio-group v-model="isCollapse" style="margin-bottom: 20px;">-->
<!--                        <el-radio-button :label="false">展开</el-radio-button>-->
<!--                        <el-radio-button :label="true">收起</el-radio-button>-->
<!--                    </el-radio-group>-->
                    <span class="userlogo">
                        <img src="../assets/logo.png" width="27px" height="27px" style="border-radius: 100px;">
                    </span>
                </el-header>
                <el-main>
                    <div v-if="userId==null" style="margin-bottom: 20px;">未登录,请登录</div>
                    <router-view/>
                </el-main>
            </el-container>
        </el-container>
    </div>
</template>

<script>
    export default {
        name: "StaffHome",
        data(){
            return{
                isCollapse: false,
                luyou: '/StaffHello',
                userId:window.sessionStorage.getItem('busId')
            }
        },
        mounted(){
            this.luyou=this.$route.path;
        },
        methods:{
            handleOpen(key, keyPath) {
                console.log(key, keyPath);
            },
            handleClose(key, keyPath) {

                console.log(key, keyPath);
            },
            isCollapseTest(){
                this.isCollapse=!this.isCollapse
            },
            handleSelect(){

            }
        }
    }
</script>

<style scoped>
    .el-header, .el-footer {
        background-color: white;
        color: #333;
        line-height: 60px;
    }

    .el-aside {
        background-color: #333744;
        color: #333;
    }

    .el-main {
        background-color: #eaeaea;
        color: #333;
    }

    body > .el-container {
        margin-bottom: 40px;
    }


    .Stafftitle{
        margin-top: 20px;
        margin-bottom: 20px;
        margin-left: 0px;
        font-size:30px;
        font-family: 华文行楷;
        color: white;
    }

    .StaffMenu:not(.el-menu--collapse){
        width: 200px;
        min-height: 400px;
    }

    .userlogo{
        float: right;
    }


</style>
